import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
  Table,
  Button,
  Space,
  notification,
  Modal,
  Input,
  Radio,
  Card,
} from 'antd';
import api from '../../api/api';

class Users extends Component {
  state = {
    showAddUserModal: false,
    newUser: {},
  };

  componentDidMount() {
    // console.log(this.props);
    const { dispatch } = this.props;

    dispatch({
      type: 'getAccountListAsync',
    });
    // console.log(users);
  }

  async delAccount(id) {
    const { dispatch } = this.props;
    let { data: res } = await api.users.delAccount(id);
    console.log(res);
    if (res.code) {
      // console.log(111);
      notification['success']({
        message: '删除成功',
        description: '您已成功删除此用户',
      });
    }

    dispatch({
      type: 'getAccountListAsync',
    });
  }

  handleOk = async () => {
    const { dispatch } = this.props;

    let { data: res } = await api.users.accountadd(this.state.newUser);

    if (res.code) {
      notification['success']({
        message: '添加成功',
        description: '添加用户已成功',
      });
    }

    this.setState({
      showAddUserModal: false,
    });

    dispatch({
      type: 'getAccountListAsync',
    });
  };

  handleCancel = () => {
    this.setState({
      showAddUserModal: false,
    });
  };

  onChange = (type, e) => {
    const { newUser } = this.state;

    newUser[type] = e.target.value;

    this.setState({
      newUser,
    });
  };

  render() {
    const columns = [
      {
        title: '用户名字',
        dataIndex: 'account',
        key: 'account',
      },
      {
        title: '邮箱地址',
        dataIndex: 'email',
        key: 'email',
      },
      {
        title: '角色',
        dataIndex: 'role',
        key: 'role',
        render: role => {
          if (role) return <span>{role.name}</span>;
          return '';
        },
      },

      {
        title: '操作',
        key: '_id',
        render: (text, record) => (
          <Space size="middle">
            <Button
              onClick={() => {
                this.delAccount(record._id);
              }}
            >
              删除
            </Button>
          </Space>
        ),
      },
    ];

    return (
      <Card
        title="用户管理"
        extra={
          <Button
            onClick={() => {
              this.setState({
                showAddUserModal: true,
              });
            }}
          >
            添加用户
          </Button>
        }
      >
        <Modal
          title="添加用户"
          visible={this.state.showAddUserModal}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Input
            placeholder="账户名字"
            value={this.state.newUser.account}
            onChange={e => {
              this.onChange('account', e);
            }}
          />
          <br />
          <Input
            placeholder="密码"
            value={this.state.newUser.password}
            onChange={e => {
              this.onChange('password', e);
            }}
          />
          <br />

          <Input
            placeholder="邮件"
            value={this.state.newUser.email}
            onChange={e => {
              this.onChange('email', e);
            }}
          />
          <br />

          <Radio.Group
            onChange={e => {
              this.onChange('role', e);
            }}
            value={this.state.newUser.role}
          >
            <Radio value={'5fc783d126420000dc00503b'}>普通管理员</Radio>
            <Radio value={'5fc7842d26420000dc00503c'}>超级管理员</Radio>
            <Radio value={'5fc79a771bd06831d09bcabe'}>商品管理员</Radio>
            <Radio value={'604ced708d237e3d9061f8e9'}>数据管理员</Radio>
          </Radio.Group>
        </Modal>

        <Table
          bordered={true}
          loading={this.props.users.length ? false : true}
          rowKey={record => record._id}
          columns={columns}
          dataSource={this.props.users}
          pagination={{ pageSize: 5 }}
        />
      </Card>
    );
  }
}

// 获取所有组件需要的数据，将需要的数据传给组件的props
const mapStateToProps = state => {
  //   console.log(state);
  return {
    users: state.users,
  };
};

export default connect(mapStateToProps)(Users);
